﻿@{
    ViewData["Title"] = "FormsExtended";
}

<div class="small-header transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="@Url.Action("Index", "Dashboard")">Dashboard</a></li>
                    <li>
                        <span>Forms</span>Supports bootstrap brand colors: .checkbox-primary, .
                    </li>
                    <li class="active">
                        <span>Forms extended </span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Forms extended
            </h2>
            <small>Examples of various extended form controls.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">


    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-body">
                    <h3>Forms extended</h3>
                    <p>Extra from controls for select, date, multiselect, inline edit and spin. All form controls automatically receive some global styling.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    X-editable
                </div>
                <div class="panel-body">

                    <p>
                        <strong>X-editable</strong> library allows you to create editable elements on your page. It includes both popup and inline modes. Please try out demo below to see how it works.
                    </p>
                    <div class="text-center">
                        <i class="fa fa-angle-down fa-2x"></i>
                    </div>

                    <div>
                        <h5>How to use</h5>
                        <p>Markup elements that should be editable. Usually it is <code>&lt;A&gt;</code> element with additional <code>data-*</code> attributes</p>


                        <table id="user" class="table table-bordered table-striped" style="clear: both">
                            <tbody>
                                <tr>
                                    <td width="35%">Simple text field</td>
                                    <td width="65%"><a href="#" id="username" data-type="text" data-pk="1" data-title="Enter username" class="editable editable-click">superuser</a></td>
                                </tr>
                                <tr>
                                    <td>Empty text field, required</td>
                                    <td><a href="#" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter your firstname" class="editable editable-click editable-empty">Empty</a></td>
                                </tr>
                                <tr>
                                    <td>Select, local array, custom display</td>
                                    <td><a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex" class="editable editable-click" style="color: gray;">not selected</a></td>
                                </tr>

                                <tr>
                                    <td>Combodate (date)</td>
                                    <td><a href="#" id="dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Select Date of birth" class="editable editable-click">15/05/1984</a></td>
                                </tr>
                                <tr>
                                    <td>Combodate (datetime)</td>
                                    <td><a href="#" id="event" data-type="combodate" data-template="DD MM YYYY  HH:mm" data-format="YYYY-MM-DD HH:mm" data-viewformat="MMM D, YYYY, HH:mm" data-pk="1" data-title="Setup event date and time" class="editable editable-click editable-empty">Empty</a></td>
                                </tr>
                                <tr>
                                    <td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
                                    <td><a href="#" id="comments" data-type="textarea" data-pk="1" data-placeholder="Your comments here..." data-title="Enter comments" class="editable editable-pre-wrapped editable-click">awesome user!</a></td>
                                </tr>



                                <tr>
                                    <td>Checklist</td>
                                    <td><a href="#" id="fruits" data-type="checklist" data-value="2,3" data-title="Select fruits" class="editable editable-click">peach<br>apple</a></td>
                                </tr>

                            </tbody>
                        </table>

                        <p class="m-t-lg">
                            All examples and documentation you can find at: <a href="http://vitalets.github.io/x-editable/" target="_blank">http://vitalets.github.io/x-editable/</a>
                        </p>

                    </div>


                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Select2
                </div>
                <div class="panel-body">

                    <p>
                        <strong>Select2</strong> Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
                    </p>

                    <h5>Bootstrap theme with Select 2 - basic example</h5>
                    <select class="js-source-states" style="width: 100%">
                        <optgroup label="Alaskan/Hawaiian Time Zone">
                            <option value="AK">Alaska</option>
                            <option value="HI">Hawaii</option>
                        </optgroup>
                        <optgroup label="Pacific Time Zone">
                            <option value="CA">California</option>
                            <option value="NV">Nevada</option>
                            <option value="OR">Oregon</option>
                            <option value="WA">Washington</option>
                        </optgroup>
                        <optgroup label="Mountain Time Zone">
                            <option value="AZ">Arizona</option>
                            <option value="CO">Colorado</option>
                            <option value="ID">Idaho</option>
                            <option value="MT">Montana</option>
                            <option value="NE">Nebraska</option>
                            <option value="NM">New Mexico</option>
                            <option value="ND">North Dakota</option>
                            <option value="UT">Utah</option>
                            <option value="WY">Wyoming</option>
                        </optgroup>
                        <optgroup label="Central Time Zone">
                            <option value="AL">Alabama</option>
                            <option value="AR">Arkansas</option>
                            <option value="IL">Illinois</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="OK">Oklahoma</option>
                            <option value="SD">South Dakota</option>
                            <option value="TX">Texas</option>
                            <option value="TN">Tennessee</option>
                            <option value="WI">Wisconsin</option>
                        </optgroup>
                        <optgroup label="Eastern Time Zone">
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="IN">Indiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="NH">New Hampshire</option>
                            <option value="NJ">New Jersey</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="OH">Ohio</option>
                            <option value="PA">Pennsylvania</option>
                            <option value="RI">Rhode Island</option>
                            <option value="SC">South Carolina</option>
                            <option value="VT">Vermont</option>
                            <option value="VA">Virginia</option>
                            <option value="WV">West Virginia</option>
                        </optgroup>
                    </select>

                    <h5 class="m-t-md">Multi Selection example</h5>
                    <select class="js-source-states-2" multiple="multiple" style="width: 100%">
                        <option value="Blue">Blue</option>
                        <option value="Red">Red</option>
                        <option value="Green">Green</option>
                        <option value="Maroon">Maroon</option>
                    </select>


                </div>
            </div>


            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Bootstrap TouchSpin
                </div>
                <div class="panel-body">

                    <p>
                        <strong>TouchSpin</strong> A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
                    </p>

                    <div>
                        <h5>Basci example</h5>
                        <input id="demo1" type="text" name="demo1" value="50">
                    </div>

                    <div class="m-t-md">
                        <h5>Vertical button alignment:</h5>
                        <input id="demo2" type="text" name="demo2" value="50">
                    </div>

                    <div class="m-t-md">
                        <h5>Example with postfix </h5>
                        <input id="demo3" type="text" name="demo3" value="50">
                    </div>

                    <div class="m-t-md">
                        <h5>Basci with button postfix </h5>
                        <input id="demo4" type="text" name="demo4" value="50">
                    </div>

                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Bootstrap clockpicker
                </div>
                <div class="panel-body">
                    <h5>ClockPicker</h5>
                    <p>A clock-style timepicker for Bootstrap.</p>
                    <div class="form-group">
                        <div class="input-group clockpicker" data-autoclose="true">
                            <input type="text" class="form-control" value="09:30">
                            <span class="input-group-addon">
                                <span class="fa fa-clock-o"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Bootstrap datetimepicker
                </div>
                <div class="panel-body">
                    <h5>Date/time picker</h5>
                    <p>Date/time picker widget based on twitter bootstrap</p>
                    <div class="form-group">
                        <div class="input-group date" id="datetimepicker1">

                            <input type="text" class="form-control"/>
                            <span class="input-group-addon">
                                <span class="fa fa-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Bootstrap datepicker
                </div>
                <div class="panel-body">

                    <p>
                        Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style.
                        http://bootstrap-datepicker.readthedocs.org/en/latest/index.html
                    </p>
                    <div class="row">

                        <div class="col-lg-3">
                            <strong>
                                Inline version
                            </strong>
                            <div id="datepicker" data-date="12/03/2012"></div>
                            <input type="hidden" id="my_hidden_input" />
                        </div>
                        <div class="col-lg-9">

                            <div class="row">

                                <div class="col-md-6">
                                    <h5>
                                        Input
                                    </h5>
                                    <p>
                                        The simplest case: focusing the input (clicking or tabbing into it) will show the picker.
                                    </p>
                                    <input id="datapicker2" type="text" value="02-16-2012" class="form-control">

                                    <h5>Component</h5>
                                    <p>
                                        Adding the date class to an input-group bootstrap component will allow the input-group-addon elements to trigger the picker.
                                    </p>
                                    <div class="input-group date">
                                        <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>
                                        Range
                                    </h5>
                                    <p>
                                        Using the input-daterange construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.
                                    </p>
                                    <div class="input-daterange input-group" id="datepicker">
                                        <input type="text" class="input-sm form-control" name="start" />
                                        <span class="input-group-addon">to</span>
                                        <input type="text" class="input-sm form-control" name="end" />
                                    </div>

                                    <h5>Options</h5>
                                    <p>
                                        There are many avalible options to datapicker, check: <a href="https://bootstrap-datepicker.readthedocs.org/en/latest/options.html" target="_blank">https://bootstrap-datepicker.readthedocs.org/en/latest/options.html</a>
                                    </p>
                                </div>

                            </div>


                        </div>

                    </div>




                </div>
            </div>

        </div>

    </div>
    <div class="row">
       
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Awesome bootstrap checkbox
                </div>
                <div class="panel-body">

                    <p>
                        Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.
                        https://github.com/flatlogic/awesome-bootstrap-checkbox
                    </p>
                    <div class="row">
                        <div class="col-md-4">
                            <fieldset>
                                <legend>
                                    Basic
                                </legend>
                                <p>
                                    Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
                                </p>
                                <div class="checkbox">
                                    <input id="checkbox1" type="checkbox">
                                    <label for="checkbox1">
                                        Default
                                    </label>
                                </div>
                                <div class="checkbox checkbox-primary">
                                    <input id="checkbox2" type="checkbox" checked="">
                                    <label for="checkbox2">
                                        Primary
                                    </label>
                                </div>
                                <div class="checkbox checkbox-success">
                                    <input id="checkbox3" type="checkbox">
                                    <label for="checkbox3">
                                        Success
                                    </label>
                                </div>
                                <div class="checkbox checkbox-info">
                                    <input id="checkbox4" type="checkbox">
                                    <label for="checkbox4">
                                        Info
                                    </label>
                                </div>
                                <div class="checkbox checkbox-warning">
                                    <input id="checkbox5" type="checkbox" checked="">
                                    <label for="checkbox5">
                                        Warning
                                    </label>
                                </div>
                                <div class="checkbox checkbox-danger">
                                    <input id="checkbox6" type="checkbox" checked="">
                                    <label for="checkbox6">
                                        Check me out
                                    </label>
                                </div>
                                <p>Checkboxes without label text</p>
                                <div class="checkbox">
                                    <input type="checkbox" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
                                    <label></label>
                                </div>
                                <div class="checkbox checkbox-primary">
                                    <input type="checkbox" id="singleCheckbox2" value="option2" checked="" aria-label="Single checkbox Two">
                                    <label></label>
                                </div>
                                <p>Inline checkboxes</p>
                                <div class="checkbox checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox1" value="option1">
                                    <label for="inlineCheckbox1"> Inline One </label>
                                </div>
                                <div class="checkbox checkbox-success checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox2" value="option1" checked="">
                                    <label for="inlineCheckbox2"> Inline Two </label>
                                </div>
                                <div class="checkbox checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox3" value="option1">
                                    <label for="inlineCheckbox3"> Inline Three </label>
                                </div>
                                <input type="checkbox" id="singleCheckbox1" class="checkbox" value="option1" aria-label="Single checkbox One">
                            </fieldset>
                        </div>
                        <div class="col-md-4">
                            <fieldset>
                                <legend>
                                    Circled
                                </legend>
                                <p>
                                    <code>.checkbox-circle</code> for roundness.
                                </p>
                                <div class="checkbox checkbox-circle">
                                    <input id="checkbox7" type="checkbox">
                                    <label for="checkbox7">
                                        Simply Rounded
                                    </label>
                                </div>
                                <div class="checkbox checkbox-info checkbox-circle">
                                    <input id="checkbox8" type="checkbox" checked="">
                                    <label for="checkbox8">
                                        Me too
                                    </label>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-md-4">
                            <fieldset>
                                <legend>
                                    Radio
                                </legend>
                                <p>
                                    Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc.
                                </p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="radio">
                                            <input type="radio" name="radio1" id="radio1" value="option1" checked="">
                                            <label for="radio1">
                                                Small
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <input type="radio" name="radio1" id="radio2" value="option2">
                                            <label for="radio2">
                                                Big
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="radio radio-danger">
                                            <input type="radio" name="radio2" id="radio3" value="option1">
                                            <label for="radio3">
                                                Next
                                            </label>
                                        </div>
                                        <div class="radio radio-danger">
                                            <input type="radio" name="radio2" id="radio4" value="option2" checked="">
                                            <label for="radio4">
                                                One
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <p>Radios without label text</p>
                                <div class="radio">
                                    <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
                                    <label></label>
                                </div>
                                <div class="radio radio-success">
                                    <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked="" aria-label="Single radio Two">
                                    <label></label>
                                </div>
                                <p>Inline radios</p>
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
                                    <label for="inlineRadio1"> Inline One </label>
                                </div>
                                <div class="radio radio-inline">
                                    <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                    <label for="inlineRadio2"> Inline Two </label>
                                </div>
                            </fieldset>
                        </div>
                    </div>




                </div>
            </div>

        </div>

    </div>

</div>

@section Styles {
    <environment names="Development,Staging,Production">
        <link rel="stylesheet" href="~/lib/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" />
        <link rel="stylesheet" href="~/lib/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
        <link rel="stylesheet" href="~/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
        <link rel="stylesheet" href="~/lib/clockpicker/dist/bootstrap-clockpicker.min.css" />
    </environment>
}

@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/moment/min/moment.min.js"></script>
        <script src="~/lib/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
        <script src="~/lib/select2/dist/js/select2.min.js"></script>
        <script src="~/lib/select2/dist/js/select2.full.min.js"></script>
        <script src="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
        <script src="~/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
        <script src="~/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
        <script src="~/lib/clockpicker/dist/bootstrap-clockpicker.min.js"></script>
    </environment>

    <script type="text/javascript">

        $(function () {

            $('#datepicker').datepicker();
            $("#datepicker").on("changeDate", function (event) {
                $("#my_hidden_input").val(
                        $("#datepicker").datepicker('getFormattedDate')
                )
            });

            $('#datapicker2').datepicker();
            $('#datepicker .input-group.date').datepicker({});
            $('#datepicker .input-daterange').datepicker({});

            $("#demo1").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,
                decimals: 2,
                boostat: 5,
                maxboostedstep: 10,
            });

            $("#demo2").TouchSpin({
                verticalbuttons: true
            });

            $("#demo3").TouchSpin({
                postfix: '%'
            });

            $("#demo4").TouchSpin({
                postfix: "a button",
                postfix_extraclass: "btn btn-default"
            });

            $(".js-source-states").select2();
            $(".js-source-states-2").select2();

            //turn to inline mode
            $.fn.editable.defaults.mode = 'inline';

            //defaults
            $.fn.editable.defaults.url = '#';

            //editables
            $('#username').editable({
                url: '#',
                type: 'text',
                pk: 1,
                name: 'username',
                title: 'Enter username'
            });

            $('#firstname').editable({
                validate: function (value) {
                    if ($.trim(value) == '') return 'This field is required';
                }
            });

            $('#sex').editable({
                prepend: "not selected",
                source: [
                    { value: 1, text: 'Male' },
                    { value: 2, text: 'Female' }
                ],
                display: function (value, sourceData) {
                    var colors = { "": "gray", 1: "green", 2: "blue" },
                            elem = $.grep(sourceData, function (o) { return o.value == value; });

                    if (elem.length) {
                        $(this).text(elem[0].text).css("color", colors[value]);
                    } else {
                        $(this).empty();
                    }
                }
            });

            $('#dob').editable();

            $('#event').editable({
                placement: 'left',
                combodate: {
                    firstItem: 'name'
                }
            });

            $('#comments').editable({
                showbuttons: 'bottom'
            });

            $('#fruits').editable({
                pk: 1,
                limit: 3,
                source: [
                    { value: 1, text: 'banana' },
                    { value: 2, text: 'peach' },
                    { value: 3, text: 'apple' },
                    { value: 4, text: 'watermelon' },
                    { value: 5, text: 'orange' }
                ]
            });

            $('#user .editable').on('hidden', function (e, reason) {
                if (reason === 'save' || reason === 'nochange') {
                    var $next = $(this).closest('tr').next().find('.editable');
                    if ($('#autoopen').is(':checked')) {
                        setTimeout(function () {
                            $next.editable('show');
                        }, 300);
                    } else {
                        $next.focus();
                    }
                }
            });

            // ClockPicker
            $('.clockpicker').clockpicker({ autoclose: true });

            // DateTimePicker
            $('#datetimepicker1').datetimepicker();

        });

    </script>
}